<gm:page title="My App" authenticate="false">
  <!--
  zomer 2007
  http://picasaweb.google.com/data/feed/base/user/ronald.liefbroer/albumid/5106852050903112577?kind=photo&alt=rss&hl=en_US
  italie camper
  http://picasaweb.google.com/data/feed/base/user/ronald.liefbroer/albumid/5115719433575665297?kind=photo&alt=atom&hl=en_US
  //-->
 
   <table style="width:100%">
  <tr>
    <td width="300" valign="top">  
      <gm:list id="list" template="photoList" height="400" data="http://picasaweb.google.com/data/feed/base/user/ronald.liefbroer/albumid/5106852050903112577?kind=photo&alt=atom&hl=en_US">
        <gm:handleEvent src="map" event="select"/>
      </gm:list>
    </td>
    <td>
      <gm:map id="map" height="400" maptypes="true" data="${list}" infotemplate="XmapTemplate">
         <gm:handleEvent src="list" event="select"/>
      </gm:map>
    </td>      
    <td width="300">
      <gm:item template="photo">
        <gm:handleEvent src="list" event="select"/>
      </gm:item>
    </td>
  </tr>
 </table>

  <gm:template id="photoList">
     <div repeat="true" style="padding: 5px">
        <gm:image ref="media:group/media:thumbnail/@url" height="54" width="54" mode="fill" style="float: left"/>
        <gm:text ref="atom:title"/>
        <br style="clear: both"/>
     </div>
  </gm:template>
  <gm:template id="photo">
    <gm:image ref="media:group/media:thumbnail[@width='288']/@url"/>
    <gm:image ref="media:group/media:thumbnail[@height='288']/@url"/>
  </gm:template>
<gm:template id="XmapTemplate">
  <div align="center" repeat="true">

    <h3><gm:text ref="atom:title" /></h3>
  </div>
</gm:template>  
</gm:page>